<template>
  <div class="hello">
    <div id="container">
      <video id="video" width="600" height="400" autoplay>
        您的浏览器不支持video标签
      </video>
      <canvas id="canvas" width="600" height="400"></canvas>
    </div>

    <button id="start" @click="startTrack">开始检测</button> 
    <br />
    <div id="tip"></div>
    <div id="result"></div>
    <div id="msg"></div>

    <div id="positions"></div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      video: null,
      cc: null,
      ctracker: null,
      canvasInput: null,
      is_alive_mouse: false,
      last_time: 0,
      last_dis_left_right: 100000000,
      showpos: false,
      last_dis_eye_norse: 0,
      last_nose_left: 0,
      last_nose_top: 0,
      last_dis_mouse: 0,
      videoObj: { video: { width: 600, height: 400 } },
      msg: "Welcome to Your Vue.js App",
    };
  },
  methods: {
    // 张嘴验证
    mouse() {
      document.getElementById("tip").innerHTML = "请正对摄像头然后张合嘴巴";
      document.getElementById("result").innerHTML = "";
      this.is_alive_mouse = true;
    },
    show() {
      this.showpos = true;
    },
    initVideo() {
      this.showpos = false;
      // Put event listeners into place
      //window.addEventListener("DOMContentLoaded", function() {

      // Grab elements, create settings, etc.
      var canvas = document.getElementById("canvas");
      var context = canvas.getContext("2d");
      this.video = document.getElementById("video");
      var errBack = (error) => {
        if (error.PERMISSION_DENIED) {
          alert("用户拒绝了浏览器请求媒体的权限");
        } else if (error.NOT_SUPPORTED_ERROR) {
          alert("对不起，您的浏览器不支持拍照功能，请使用其他浏览器");
        } else if (error.MANDATORY_UNSATISFIED_ERROR) {
          alert("指定的媒体类型未接收到媒体流");
        } else {
          alert(
            "系统未能获取到摄像头，请确保摄像头已正确安装。或尝试刷新页面，重试"
          );
        }
      };

      // Put video listeners into place
      if (navigator.getUserMedia) {
        // Standard
        navigator.getUserMedia(
          this.videoObj,
          (stream) => {
            try {
              this.video.srcObject = stream;
            } catch (error) {
              this.video.src = window.URL.createObjectURL(stream);
            }
          },
          errBack
        );
      }
    },
    drawLoop() {
      let vid_width = this.video.width;
      let vid_height = this.video.height;
      requestAnimFrame(this.drawLoop);
      this.cc.clearRect(0, 0, vid_width, vid_height);

      let score = this.ctracker.getScore().toFixed(2) * 100;
      document.getElementById("positions").innerHTML = score;
      // 如果脸不正就提示请正对屏幕  分数在8以上
      this.is_alive_mouse = score > 50;
      if (!this.is_alive_mouse) {
        document.getElementById("tip").innerHTML = "请正对摄像头然后张合嘴巴";
      }

      let positions = this.ctracker.getCurrentPosition();
      if (positions) {
        this.ctracker.draw(this.canvasInput);
      } else {
        return;
      }

      //张嘴
      if (this.is_alive_mouse == true) {
        if (
          this.last_time == 0 ||
          (new Date().getTime() - this.last_time > 500 &&
            new Date().getTime() - this.last_time < 10000)
        ) {
          //研究和鼻子距离
          var xdiff = positions[62][0] - positions[27][0];
          var ydiff = positions[62][1] - positions[27][1];
          var dis_eye_norse = Math.pow(xdiff * xdiff + ydiff * ydiff, 0.5);

          //上嘴唇 和下嘴唇距离
          var xdiff_mouse = positions[53][0] - positions[47][0];
          var ydiff_mouse = positions[53][1] - positions[47][1];
          var dis_mouse = Math.pow(
            xdiff_mouse * xdiff_mouse + ydiff_mouse * ydiff_mouse,
            0.5
          );

          //上次的眼鼻距离和这次的眼鼻距离差
          var dn = Math.abs(dis_eye_norse - this.last_dis_eye_norse);

          //上次的嘴距离和本次的嘴距离差
          var dm = Math.abs(dis_mouse - this.last_dis_mouse);

          //鼻子的位置确保变化不大
          if (
            this.last_nose_left > 0 &&
            this.last_nose_top > 0 &&
            Math.abs(positions[62][0] - this.last_nose_left) < 5 &&
            Math.abs(positions[62][1] - this.last_nose_top) < 5
          ) {
            //dm > dis_mouse / 40
            if (this.last_dis_eye_norse > 0 && dn < (dis_eye_norse * 1) / 50) {
              if (this.last_dis_mouse > 0 && dm > dis_mouse / 10) {
                document.getElementById("result").innerHTML = "通过";

                this.is_alive_mouse = false;
              }
            }
          }

          this.last_dis_mouse = dis_mouse;
          this.last_dis_eye_norse = dis_eye_norse;
          this.last_time = new Date().getTime();

          this.last_nose_left = positions[62][0];
          this.last_nose_top = positions[62][1];
        }
      }
    },
    startTrack() {
      this.ctracker = new clm.tracker();
      this.ctracker.init();
      this.ctracker.start(this.video);

      this.canvasInput = document.getElementById("canvas");
      this.cc = this.canvasInput.getContext("2d");
      this.cc.lineWidth = 1;
      this.mouse();
      this.drawLoop();
    },
  },
  mounted() {
    // 初始化摄像头
    this.initVideo();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#video,
#canvas {
  position: absolute;
  top: 0;
  left: 0;
}
</style>
